<template>
    <div class="page_root" data-page-name="1" data-page-identification="a_a8cs2g7b5t">
        <a-spin :spinning="actionState.spinning">
            <div class="my-page">
                <div class="content-box">
                    <div class="right-table">
                        <div class="search">
                            <a-form>
                                <a-row style="height: 40px; position: relative">
                                    <a-col :span="5">
                                        <a-form-item label="计划结束时间" :label-col="{ span: 9 }">
                                            <a-date-picker
                                                v-model:value="actionState.filter.endTime"
                                                valueFormat="YYYY-MM-DD"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="5">
                                        <a-form-item label="任务负责人" :label-col="{ span: 9 }">
                                            <a-select
                                                v-model:value="actionState.filter.taskOwner"
                                                allowClear
                                                showSearch
                                                :options="peopleList"
                                                :field-names="{ label: 'label', value: 'value' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="5">
                                        <a-form-item label="任务状态" :label-col="{ span: 8 }">
                                            <a-select
                                                v-model:value="actionState.filter.taskStatusList"
                                                mode="multiple"
                                                showArrow="true"
                                                allowClear
                                                showSearch
                                                :options="[
                                                    { label: '未启动', value: '未启动' },
                                                    { label: '进行中', value: '进行中' },
                                                    { label: '完成', value: '完成' },
                                                    { label: '延期', value: '延期' },
                                                    { label: '延期完成', value: '延期完成' }
                                                ]"
                                            />
                                        </a-form-item>
                                    </a-col>

                                    <a-col :span="9" style="position: relative">
                                        <a-button type="primary" class="mr16 ml10 task-fill-btn" @click="getAction">
                                            查询
                                        </a-button>
                                        <a-button
                                            class="task-no-btn"
                                            style="position: absolute; right: 0px"
                                            type="primary"
                                            ghost
                                            @click="handlerAddAction"
                                        >
                                            新建
                                        </a-button>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </div>
                        <div class="table-box">
                            <a-table
                                bordered
                                rowKey="taskId"
                                :loading="actionState.tableLoading"
                                :customRow="customRow"
                                :columns="actionState.columns"
                                :data-source="actionState.dataList"
                                :pagination="false"
                                :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                                :scroll="{ x: scrollX, y: '650px' }"
                                @resizeColumn="handleTaskResizeColumn"
                            >
                                <template #bodyCell="{ column, record, text }">
                                    <template v-if="column.dataIndex === 'taskStatusOnOrOff'">
                                        <a-switch
                                            :checked="record['taskStatusOnOrOff']"
                                            :disabled="record.nodeType === 'MENU' || !actionState.projectManager"
                                            @click="changeTaskStatusOnOrOff(record)"
                                        />
                                    </template>
                                    <!--                                新-任务进度-->
                                    <template v-if="column.dataIndex === 'taskSchedule'">
                                        <a-progress
                                            :percent="record.taskSchedule"
                                            status="active"
                                            @click="
                                                changeTaskSchedule(
                                                    record.finishPermission,
                                                    record.taskSchedule,
                                                    record.taskId,
                                                    record.taskStatus
                                                )
                                            "
                                        />
                                    </template>
                                    <!--                                end新-任务进度-->
                                    <!-- 新-审核标准字段 -->
                                    <template v-if="column.dataIndex === 'assessorStandard'">
                                        <a-tooltip
                                            @mouseenter="handlerGetStandard(record)"
                                            placement="top"
                                            :overlayStyle="standardStyle"
                                            color="#fff"
                                        >
                                            <template #title>
                                                <p
                                                    style="color: #262626; margin: 0"
                                                    v-for="(item, index) in actionState.standardList"
                                                    :key="index"
                                                    >{{ item }}</p
                                                >
                                            </template>
                                            <div
                                                style="
                                                    min-width: 70px;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                    overflow: hidden;
                                                "
                                                >{{ text }}</div
                                            >
                                        </a-tooltip>
                                    </template>
                                    <!-- 审核标准 -->
                                    <template
                                        v-if="
                                            column.dataIndex === 'unclosedRiskNumber' ||
                                            column.dataIndex === 'riskNumber'
                                        "
                                    >
                                        <a
                                            @click="
                                                handlerShowRisks(
                                                    record,
                                                    column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                                )
                                            "
                                        >
                                            {{ text }}
                                        </a>
                                    </template>
                                    <!-- 附件模板 -->

                                    <template v-if="column.dataIndex === 'attachmentTemplate'">
                                        <!--                                  预览/下载-->
                                        <div v-for="(item, index) in record.attachmentTemplateList" :key="index">
                                            <a-dropdown>
                                                <span
                                                    style="
                                                        overflow: hidden;
                                                        white-space: nowrap;
                                                        text-overflow: ellipsis;
                                                        display: block;
                                                    "
                                                    :title="item.name"
                                                >
                                                    {{ item.name }}
                                                </span>
                                                <template #overlay>
                                                    <a-menu>
                                                        <a-menu-item>
                                                            <a-button
                                                                style="width: 100%"
                                                                type="link"
                                                                size="small"
                                                                @click="attachmentTemplateDownLoad(item)"
                                                                >下载</a-button
                                                            >
                                                        </a-menu-item>
                                                    </a-menu>
                                                </template>
                                            </a-dropdown>
                                        </div>
                                        <!--                                  预览/下载-->
                                    </template>
                                    <template v-if="column.dataIndex === 'milepostName'">
                                        {{ text }}
                                    </template>
                                    <!--                                SOP-->
                                    <template v-if="column.dataIndex === 'taskDependency'">
                                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                            <template #title>
                                                <p
                                                    v-for="(item, index) in handlerGetSpace(record.taskDependency)"
                                                    :key="index"
                                                    style="color: #262626; margin: 0"
                                                    >{{ item }}</p
                                                >
                                            </template>
                                            <div class="finish-standard">{{ text }}</div>
                                        </a-tooltip>
                                    </template>
                                    <!--                                SOP-->
                                    <!-- 完成标准 -->
                                    <template v-if="column.dataIndex === 'finishStandard'">
                                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                            <template #title>
                                                <p
                                                    v-for="(item, index) in handlerGetSpace(record.finishStandard)"
                                                    :key="index"
                                                    style="color: #262626; margin: 0"
                                                    >{{ item }}</p
                                                >
                                            </template>
                                            <div class="finish-standard">{{ text }}</div>
                                        </a-tooltip>
                                    </template>
                                    <template v-if="column.dataIndex === 'taskRemarks'">
                                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                            <template #title>
                                                <p
                                                    v-for="(item, index) in handlerGetSpace(record.taskRemarks)"
                                                    :key="index"
                                                    style="color: #262626; margin: 0"
                                                    >{{ item }}</p
                                                >
                                            </template>
                                            <div class="finish-standard">{{ text }}</div>
                                        </a-tooltip>
                                    </template>
                                    <template v-if="column.dataIndex === 'description'">
                                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                            <template #title>
                                                <p
                                                    v-for="(item, index) in handlerGetSpace(record.description)"
                                                    :key="index"
                                                    style="color: #262626; margin: 0"
                                                    >{{ item }}</p
                                                >
                                            </template>
                                            <div class="finish-standard">{{ text }}</div>
                                        </a-tooltip>
                                    </template>
                                    <template v-if="column.dataIndex === 'taskName'">
                                        <div class="task-name" v-if="isTemplate">
                                            <div
                                                v-if="record.mark === '里程碑'"
                                                :class="{
                                                    'task-milestone': record.mark === '里程碑',
                                                    'task-milestone-right':
                                                        record.mark === '里程碑' && record.critialPath
                                                }"
                                                >里程碑</div
                                            >
                                            <div
                                                v-else-if="record.mark === '初验'"
                                                :class="{
                                                    'task-first': record.mark === '初验',
                                                    'task-first-right': record.mark === '初验' && record.critialPath
                                                }"
                                            ></div>
                                            <div
                                                v-else-if="record.mark === '终验'"
                                                class="task-over"
                                                :class="{
                                                    'task-over': record.mark === '终验',
                                                    'task-over-right': record.mark === '终验' && record.critialPath
                                                }"
                                            ></div>
                                            <div v-if="record.critialPath" class="critical-path">关键路径</div>
                                            <div
                                                :class="{
                                                    'is-first-no': record.mark === null && !record.critialPath,
                                                    'is-first': record.mark !== null,
                                                    'is-first-path': record.mark !== null && record.critialPath,
                                                    'is-first-path-no-mark': record.mark === null && record.critialPath
                                                }"
                                            >
                                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                                    <template #title>
                                                        <p style="color: #262626; margin: 0"
                                                            >{{ record.taskIndex }} {{ text }}</p
                                                        >
                                                    </template>
                                                    <span class="task-name-title"
                                                        >{{ record.taskIndex }} {{ text }}</span
                                                    >
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div class="task-name" v-else>
                                            <div v-if="record.mark === '里程碑'" class="task-milestone">里程碑</div>
                                            <div v-else-if="record.mark === '初验'" class="task-first"></div>
                                            <div v-else-if="record.mark === '终验'" class="task-over"></div>

                                            <div
                                                :class="{
                                                    'is-first-no': record.mark === null,
                                                    'is-first': record.mark !== null
                                                }"
                                            >
                                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                                    <template #title>
                                                        <p style="color: #262626; margin: 0">{{ text }}</p>
                                                    </template>
                                                    <span class="task-name-title">{{ text }}</span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- 倒计时 -->
                                    <template v-if="column.dataIndex === 'countDown'">
                                        <div class="count-down-content">
                                            <a-tooltip
                                                placement="top"
                                                :overlayStyle="standardStyle"
                                                color="#fff"
                                                v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]"
                                            >
                                                <template #title>
                                                    <div class="count-down-hover">
                                                        <p
                                                            v-for="(item, index) in record.hoverLabelList"
                                                            :key="index"
                                                            >{{ item }}</p
                                                        >
                                                    </div>
                                                </template>
                                                <div class="count-down"
                                                    >{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '倒计时'
                                                            )[1]
                                                        )[0]
                                                    }}:<span class="weight-num">{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '倒计时'
                                                            )[1]
                                                        )[1]
                                                    }}</span></div
                                                >
                                            </a-tooltip>
                                            <div
                                                v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]"
                                                class="extension-color"
                                            >
                                                {{
                                                    splitStringByColon(
                                                        shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                                    )[0]
                                                }}:<span class="weight-num">{{
                                                    splitStringByColon(
                                                        shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                                    )[1]
                                                }}</span>
                                            </div>

                                            <a-tooltip placement="top" :overlayStyle="labelToolStyle" color="#fff">
                                                <template #title>
                                                    <div class="score-title"
                                                        >项目总监加减分总和：{{
                                                            getScore(record.projectDirectorLabelList)
                                                        }}</div
                                                    >
                                                    <div class="score-table">
                                                        <a-table
                                                            :scroll="{ x: '700px', y: '200px' }"
                                                            :columns="actionStates.labelCoulmn"
                                                            :dataSource="record.projectDirectorLabelList"
                                                            bordered
                                                            :pagination="false"
                                                        /> </div
                                                    >>
                                                </template>
                                                <div
                                                    v-if="
                                                        shouldDisplayCountDownWithTooltip(
                                                            record.labelList,
                                                            '项目总监'
                                                        )[0]
                                                    "
                                                    :class="{
                                                        'all-group-no': hasHyphen(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目总监'
                                                            )[1]
                                                        ),
                                                        'all-group-yes': hasPlus(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目总监'
                                                            )[1]
                                                        )
                                                    }"
                                                    >{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目总监'
                                                            )[1]
                                                        )[0]
                                                    }}:<span class="weight-num">{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目总监'
                                                            )[1]
                                                        )[1]
                                                    }}</span></div
                                                >
                                            </a-tooltip>
                                            <a-tooltip placement="top" :overlayStyle="labelToolStyle" color="#fff">
                                                <template #title>
                                                    <div class="score-title"
                                                        >项目经理加减分总和：{{ getScore(record.pmLabelList) }}</div
                                                    >
                                                    <div class="score-table">
                                                        <a-table
                                                            :scroll="{ x: '700px', y: '200px' }"
                                                            :columns="actionStates.labelCoulmn"
                                                            :dataSource="record.pmLabelList"
                                                            bordered
                                                            :pagination="false"
                                                        />
                                                    </div>
                                                </template>
                                                <div
                                                    v-if="
                                                        shouldDisplayCountDownWithTooltip(
                                                            record.labelList,
                                                            '项目经理'
                                                        )[0]
                                                    "
                                                    :class="{
                                                        'pm-score-no': hasHyphen(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目经理'
                                                            )[1]
                                                        ),
                                                        'pm-score-yes': hasPlus(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目经理'
                                                            )[1]
                                                        )
                                                    }"
                                                    >{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目经理'
                                                            )[1]
                                                        )[0]
                                                    }}:<span class="weight-num">{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '项目经理'
                                                            )[1]
                                                        )[1]
                                                    }}</span></div
                                                >
                                            </a-tooltip>

                                            <a-tooltip placement="top" :overlayStyle="labelToolStyle" color="#fff">
                                                <template #title>
                                                    <div class="score-title"
                                                        >项目负责人和执行人加减分总和：{{
                                                            getScore(record.taskOwnerLabelList)
                                                        }}</div
                                                    >
                                                    <div class="score-table">
                                                        <a-table
                                                            :scroll="{ x: '700px', y: '200px' }"
                                                            :columns="actionStates.labelCoulmn"
                                                            :dataSource="record.taskOwnerLabelList"
                                                            bordered
                                                            :pagination="false"
                                                        />
                                                    </div>
                                                </template>
                                                <div
                                                    v-if="
                                                        shouldDisplayCountDownWithTooltip(
                                                            record.labelList,
                                                            '任务执行人'
                                                        )[0]
                                                    "
                                                    :class="{
                                                        'ower-score-no': hasHyphen(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '任务执行人'
                                                            )[1]
                                                        ),
                                                        'ower-score-yes': hasPlus(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '任务执行人'
                                                            )[1]
                                                        )
                                                    }"
                                                    >{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '任务执行人'
                                                            )[1]
                                                        )[0]
                                                    }}:<span class="weight-num">{{
                                                        splitStringByColon(
                                                            shouldDisplayCountDownWithTooltip(
                                                                record.labelList,
                                                                '任务执行人'
                                                            )[1]
                                                        )[1]
                                                    }}</span></div
                                                >
                                            </a-tooltip>
                                        </div>
                                    </template>
                                    <!-- 倒计时 -->
                                    <template v-if="column.dataIndex === 'taskStatus'">
                                        <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                        <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                        <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                        <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                                        <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14"
                                            >延期完成</div
                                        >
                                        <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                                        <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                                        <div v-else>{{ text }}</div>
                                    </template>
                                    <template v-if="column.dataIndex === 'attachment'">
                                        <!--                                  预览/下载-->
                                        <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                                            <a-dropdown>
                                                <span
                                                    style="
                                                        overflow: hidden;
                                                        white-space: nowrap;
                                                        text-overflow: ellipsis;
                                                        display: block;
                                                    "
                                                    :title="item.name"
                                                >
                                                    {{ item.name }}
                                                </span>
                                                <template #overlay>
                                                    <a-menu>
                                                        <a-menu-item>
                                                            <a-button
                                                                style="width: 100%"
                                                                type="link"
                                                                size="small"
                                                                @click="handlerDownload(item)"
                                                                >下载</a-button
                                                            >
                                                        </a-menu-item>
                                                    </a-menu>
                                                </template>
                                            </a-dropdown>
                                        </div>
                                        <!--                                  预览/下载-->
                                    </template>
                                    <template v-if="column.dataIndex === 'operation'">
                                        <a-space v-if="record.nodeType === 'MENU'">
                                            <a-button
                                                size="small"
                                                type="link"
                                                :disabled="record.disabledMenuEditBtn"
                                                @click="handlerEdit(record)"
                                            >
                                                编辑
                                            </a-button>
                                            <a-popconfirm
                                                title="确定要删除吗？"
                                                :disabled="record.disabledMenuDelBtn"
                                                @confirm="handlerDelete(record)"
                                            >
                                                <a-button :disabled="record.disabledMenuDelBtn" type="link"
                                                    >删除</a-button
                                                >
                                            </a-popconfirm>
                                        </a-space>
                                        <a-space v-else>
                                            <a-button
                                                size="small"
                                                v-if="
                                                    (record.taskStatus === '完成' ||
                                                        record.taskStatus === '延期完成') &&
                                                    !record.instanceId
                                                "
                                                type="link"
                                                @click="handlerEdit(record, true)"
                                            >
                                                恢复
                                            </a-button>
                                            <template v-else>
                                                <a-button
                                                    size="small"
                                                    v-if="
                                                        (!record.taskExamStatus ||
                                                            record.taskExamStatus === '未通过') &&
                                                        isTemplate
                                                    "
                                                    type="link"
                                                    @click="handleActionStart(record)"
                                                >
                                                    开始
                                                </a-button>
                                                <a-button size="small" v-else type="link" @click="actionBeforeOk(record)">
                                                    完成
                                                </a-button>
                                            </template>
                                            <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                            <a-button
                                                size="small"
                                                type="link"
                                                :disabled="record.disabledEditBtn"
                                                @click="handlerEditAction(record)"
                                            >
                                                编辑
                                            </a-button>
                                            <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                            <a-dropdown>
                                                <template #overlay>
                                                    <a-menu @click="handleMenuClick">
                                                        <a-menu-item key="1" v-if="!isTemplate">
                                                            <a-popconfirm
                                                                title="确定要删除吗？"
                                                                :disabled="record.disabledDelBtn"
                                                                @confirm="handlerDeleteAction(record)"
                                                            >
                                                                <a-button
                                                                    size="small"
                                                                    :disabled="record.disabledDelBtn"
                                                                    type="link"
                                                                    >删除</a-button
                                                                >
                                                            </a-popconfirm>
                                                        </a-menu-item>
                                                        <a-menu-item key="2">
                                                            <a-button
                                                                size="small"
                                                                type="link"
                                                                @click="handlerWarning(record)"
                                                            >
                                                                预警
                                                            </a-button>
                                                        </a-menu-item>

                                                        <a-menu-item key="3">
                                                            <a-button
                                                                size="small"
                                                                type="link"
                                                                :disabled="record.disabledNoteBtn"
                                                                @click="handlerShowActionNotes(record)"
                                                            >
                                                                历史备注
                                                            </a-button>
                                                        </a-menu-item>
                                                        <a-menu-item key="4">
                                                            <a-button
                                                                size="small"
                                                                type="link"
                                                                v-if="
                                                                    (record.taskStatus === '完成' ||
                                                                        record.taskStatus === '延期完成') &&
                                                                    !record.instanceId
                                                                "
                                                                @click="handleSup(record)"
                                                            >
                                                                补传附件
                                                            </a-button>
                                                        </a-menu-item>
                                                    </a-menu>
                                                </template>
                                                <a-button size="small" type="link">
                                                    更多
                                                    <DownOutlined />
                                                </a-button>
                                            </a-dropdown>
                                            <!-- <a-button type="link"  @click="handlerEdit(record)"> 编辑 </a-button> -->
                                        </a-space>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </div>

                <a-modal
                    :visible="actionState.addOrEditActionVisible"
                    :title="actionState.title"
                    destroyOnClose
                    centered
                    width="50%"
                    :body-style="{ maxHeight: '850px', overflow: 'auto' }"
                    @cancel="actionState.addOrEditActionVisible = false"
                >
                    <a-form ref="actionFormRef" :model="actionState.actionList">
                        <div v-for="(item, index) in actionState.actionList" :key="index" class="form-item">
                            <div class="form-content-action">
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item label="项目阶段">
                                            <a-select
                                                placeholder="请选择项目阶段"
                                                v-model:value="actionState.actionList[index].milepostId"
                                                :disabled="actionState.isTaskAdd"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="任务名称"
                                            :name="[index, 'taskName']"
                                            :rules="{ required: true, message: '请输入任务名称!' }"
                                        >
                                            <a-select
                                                placeholder="请选择任务名称"
                                                v-model:value="actionState.actionList[index].taskName"
                                                :disabled="actionState.isTaskAdd"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="行动项任务名称"
                                            :name="[index, 'taskName']"
                                            :rules="{ required: true, message: '请输入行动项任务名称!' }"
                                        >
                                            <a-input
                                                placeholder="请输入行动项任务名称"
                                                v-model:value="actionState.actionList[index].taskName"
                                                :disabled="actionState.isTaskAdd"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="预计投入工时"
                                            :name="[index, 'workingHours']"
                                            :rules="[
                                                { required: true, message: '请输入预计投入工时!', trigger: 'blur' },
                                                {
                                                    pattern: /^(0\.5|[1-9](\d*)?(\.5)?(\.0)?)$/,
                                                    message: '请输入大于0的数字(支持0.5的倍数)',
                                                    trigger: 'blur'
                                                }
                                            ]"
                                        >
                                            <a-input
                                                placeholder="请输入工时(支持0.5的数字)"
                                                v-model:value="actionState.actionList[index].workingHours"
                                                type="number"
                                                suffix="小时"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="任务起止时间"
                                            :name="[index, 'allTime']"
                                            :rules="{ required: true, message: '请选择任务起止时间!' }"
                                        >
                                            <a-range-picker
                                                v-model:value="actionState.actionList[index].allTime"
                                                valueFormat="YYYY-MM-DD"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="任务负责人"
                                            :name="[index, 'taskOwner']"
                                            :rules="{ required: true, message: '请选择任务负责人!' }"
                                        >
                                            <a-select
                                                placeholder="请选择任务负责人"
                                                v-model:value="actionState.actionList[index].taskOwner"
                                                showSearch
                                                :options="peopleList"
                                                :field-names="{ label: 'label', value: 'value' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="审核员"
                                            :name="[index, 'assessorName']"
                                            :rules="{ required: true, message: '请选择审核员!' }"
                                        >
                                            <a-select
                                                placeholder="请选择审核员"
                                                v-model:value="actionState.actionList[index].assessorName"
                                                showSearch
                                                :options="peopleList"
                                                :field-names="{ label: 'label', value: 'value' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="PMO"
                                            :name="[index, 'assessorName']"
                                            :rules="{ required: true, message: '请选择PMO!' }"
                                        >
                                            <a-select
                                                placeholder="请选择PMO"
                                                v-model:value="actionState.actionList[index].assessorName"
                                                showSearch
                                                :options="peopleList"
                                                :field-names="{ label: 'label', value: 'value' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row class="one-line">
                                    <a-col :span="24">
                                        <a-form-item
                                            label="任务执行人"
                                            :name="[index, 'taskParticipantList']"
                                            :rules="{ required: true, message: '请选择任务执行人!' }"
                                        >
                                            <a-select
                                                placeholder="请选择任务执行人"
                                                v-model:value="actionState.actionList[index].taskParticipantList"
                                                showSearch
                                                mode="multiple"
                                                :options="peopleList"
                                                :field-names="{ label: 'label', value: 'value' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col v-if="taskPeopleList && taskPeopleList.length > 0">
                                        <div style="width: 700px; margin-left: 115px; margin-bottom: 28px">
                                            <a
                                                href="javascript:;"
                                                v-for="(item, num) in taskPeopleList"
                                                @click="handlerAddPeople(item.value, index)"
                                                ><span style="margin: 0 5px">{{ item.value }}</span></a
                                            >
                                        </div>
                                    </a-col>
                                </a-row>
                                <a-row class="one-line">
                                    <a-col :span="24">
                                        <a-form-item label="备注">
                                            <a-textarea
                                                placeholder="请输入备注"
                                                v-model:value="actionState.actionList[index].description"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>
                            <a v-if="!actionState.current.taskId" class="del" @click="handlerDeleteActionItem(index)"
                                >删除</a
                            >
                        </div>
                    </a-form>
                    <a-button
                        v-if="!actionState.current.taskId"
                        type="primary"
                        ghost
                        class="add-btn"
                        @click="handlerAddActionItem"
                    >
                        <plus-outlined />
                        添加
                    </a-button>
                </a-modal>

                <!-- 新-模板项目检查清单弹出框 -->
                <a-modal
                    :visible="actionState.templateOkVisible"
                    title="完成行动项任务"
                    destroyOnClose
                    centered
                    width="40%"
                    @cancel="actionState.templateOkVisible = false"
                >
                    <div style="border-bottom: 1px solid #d9d9d9; margin-bottom: 10px">
                        <!-- 完成标准 -->
                        <div class="new-check">
                            <div class="label">完成标准</div>
                        </div>
                        <div class="checkbox-group" v-for="(item, index) in actionState.CompletionCheckListCheckList" :key="index">
                            <a-checkbox v-model:checked="item.selected">
                                {{ item.content }}
                            </a-checkbox>
                        </div>
                        <!-- 审核标准 -->
                        <div class="new-check" v-if="actionState.ppmTemplateCheckList.length > 0">
                            <div class="label">审核标准及注意事项</div>
                        </div>
                        <div v-for="(item, index) in actionState.ppmTemplateCheckList" :key="index" class="checkbox-group">
                            <div v-html="formatContent(item.content)"></div>
                        </div>
                        <!-- 审核标准 -->
                        <!--                        sop-->
                        <div class="new-check" v-if="actionState.sopList[0].contentList.length > 0">
                            <div class="label">SOP</div>
                        </div>
                        <div class="checkbox-group">
                            <a-checkbox
                                v-for="(msg, index) in actionState.sopList[0].contentList"
                                :key="index"
                                v-model:checked="msg.selected"
                            >
                                {{ msg.msg }}
                            </a-checkbox>
                        </div>
                        <!--                        sop-->
                    </div>

                    <template #footer>
                        <a-button key="back" type="primary" @click="downLoadTemplate">下载模板</a-button>
                        <a-button key="back" @click="actionState.templateOkVisible = false">取消</a-button>
                        <a-button key="back" @click="handleSubmitactionSop">保存</a-button>
                        <a-button key="submit" type="primary" :loading="actionOkDisabled" @click="handlerActionOk"
                            >确定
                        </a-button>
                    </template>
                    <a-upload
                        :file-list="actionState.fileList"
                        :multiple="true"
                        :before-upload="handlerUpload"
                        @remove="handleRemove"
                        accept=".xlsx,.ppt,.pdf,.PDF, image/*, .docx, .rp, .xls"
                    >
                        <a-button type="primary">
                            <upload-outlined />
                            上传
                        </a-button>
                    </a-upload>
                    <span>支持格式：image/*,.xlsx,.xls,.docx,.rp,.ppt,.pptx,.pdf</span>
                </a-modal>
                <!-- 模板项目检查清单弹出框 -->
            </div>
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID
    const props = defineProps({
        processInstanceId: {
            type: String
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        processInstanceId: props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    // 复用逻辑
    //从项目参与人中取人名让任务用
    const peopleList = ref([])
    //新完成任务弹窗内容
    function formatContent(content) {
        // 将内容分割成多行
        const lines = content.split('；')
        // 将每一行包裹在 p 标签中并返回
        return lines.map(line => `<p>${line.trim()}</p>`).join('')
    }

    // 任务下载全部模板
    function downLoadTemplate() {
      if (current.value.attachmentTemplateList.length < 1) {
        message.info('任务没有附件')
      } else {
        post(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/download_template/${current.value.taskId}`, null, { responseType: 'arraybuffer' }).then(res => {
          downloadZip(res, '任务附件模板.zip');
        })
      }


    }
    // 交付参与人s所有人
    function getAllJfPeople() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
            peopleList.value = data.userDtoList.map(item => {
                return {
                    label: item.name,
                    value: item.name
                }
            })
        })
    }
    const calculateTimeDifference = targetDate => {
        const targetDateTime = new Date(targetDate)
        const currentDateTime = new Date()
        const timeDifference = targetDateTime - currentDateTime
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24))

        return {
            days: days,
            result: `${days}天${Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}小时`
        }
    }

    function shouldDisplayCountDownWithTooltip(labelList, text) {
        const result = labelList?.filter(label => label.includes(text))
        if (result && result.length > 0) {
            return [true, result[0]]
        } else {
            return false
        }
    }

    function hasHyphen(str) {
        return str.includes('-')
    }

    function hasPlus(str) {
        return str.includes('+')
    }

    function splitStringByColon(inputString) {
        return inputString.split(':')
    }

    const shouldDisplayCountDown = targetDate => {
        const { days } = calculateTimeDifference(targetDate)
        return days >= 0 && days <= 7
    }
    const userInfoStorage = localStorage.getItem('al__USER_INFO')
    if (userInfoStorage) {
        try {
            const userInfo = JSON.parse(userInfoStorage)
        } catch (error) {
            console.log(error)
        }
    }
    const taskLeader = JSON.parse(userInfoStorage)
    getAllJfPeople()
    // 复用逻辑

    // 行动项独立逻辑
    const actionState = reactive({
        filter: {
          taskId:undefined,
            taskName: '',
            taskParticipantStr: undefined,
            endTime: '',
            taskOwner: '',
            taskStatusOnOrOff: 'true',
            taskStatusList: [],
            stateInput: '',
            priorityStr: '',
            milepostId: '',
            milepostId: ''
        },
      templateOkVisible:false,
     sopList:[],
      CompletionCheckListCheckList:[],
      ppmTemplateCheckList:[],
      fileList:[],
        addOrEditActionVisible: false,
        columns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                fixed: 'left',
                align: 'left',
                customCell: ({ rowIndex, rowSpan, aa }) => {
                    return {
                        rowSpan: rowSpan,
                        aaa: '44',
                        style: {
                            fontSize: '16px',
                            color: '#262626',
                            fontWeight: '600',
                            borderTop: aa ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },

            {
                title: '任务名称',
                dataIndex: 'taskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                fixed: 'left',
                align: 'left',
                customCell: ({ level, nodeType, aa, rowIndex }) => {
                    return {
                        style: {
                            paddingLeft: `${(level + 1) * 20}px`,
                            color: `${nodeType === 'MENU' ? '#1890ff' : ''}`,
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none',
                            paddingLeft: 0
                        }
                    }
                }
            },
            {
                title: '行动项任务名称',
                dataIndex: 'taskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                fixed: 'left',
                align: 'left',
                customCell: ({ level, nodeType, aa, rowIndex }) => {
                    return {
                        style: {
                            paddingLeft: `${(level + 1) * 20}px`,
                            color: `${nodeType === 'MENU' ? '#1890ff' : ''}`,
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none',
                            paddingLeft: 0
                        }
                    }
                }
            },
            {
                title: '任务状态',
                dataIndex: 'taskStatus',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务进度',
                dataIndex: 'taskSchedule',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '倒计时及加减分',
                dataIndex: 'countDown',
                resizable: true,
                ellipsis: false,
                width: '250px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none',
                            padding: 0
                        }
                    }
                }
            },
            {
                title: '附件',
                dataIndex: 'attachment',
                resizable: true,
                ellipsis: true,
                width: '200px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务负责人',
                dataIndex: 'taskOwner',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '审核员',
                dataIndex: 'assessorName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: 'PMO',
                dataIndex: 'assessorName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务执行人',
                resizable: true,
                dataIndex: 'taskParticipantStr',
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划开始',
                dataIndex: 'startTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '实际开始',
                dataIndex: 'actualStarTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划完成',
                dataIndex: 'endTime',
                ellipsis: true,
                width: '120px',
                resizable: true,
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '	实际完成',
                dataIndex: 'taskFinishTime',
                ellipsis: true,
                resizable: true,
                width: '120px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划工时(小时)',
                dataIndex: 'workingHours',
                resizable: true,
                ellipsis: true,
                width: '130px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '实际工时(小时)',
                dataIndex: 'actualWorkHours',
                resizable: true,
                ellipsis: true,
                width: '130px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '工时投入状态',
                dataIndex: 'stateInput',
                resizable: true,
                ellipsis: true,
                width: '120px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                width: '220px',
                align: 'center',
                fixed: 'right',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            }
        ],
        tableLoading: false,
        spinning: false,
        actionList: [],
        actionListItem: {
            taskName: undefined,
            milepostId: undefined,
            taskDependency: undefined,
            priority: 'HIGH',
            taskOwner: taskLeader.value.name,
            taskType: '主任务',
            assessorName: taskLeader.value.name,
            startTime: undefined,
            endTime: undefined,
            allTime: [],
            taskParticipantList: [],
            description: undefined,
            workingHours: undefined,
            output: '否',
            parentId: undefined,
            taskIndex: undefined,
            reasonsChange: undefined,
            nodeType: 'TASK',
            // 验收标准
            acceptanceCriteria: undefined,
            // 验收标准
            taskRemarks: undefined
        },
        isTaskAdd: false,
        current: {}
    })

    //     获取行动项
    function getAction() {}
    function groupActionData(data) {
        let currentMilepostName = ''
        return data.map((item, index) => {
            if (currentMilepostName !== item.milepostName) {
                currentMilepostName = item.milepostName
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentMilepostName === data[i].milepostName) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
                item.aa = index !== actionState.dataList.length - 1
            } else {
                item.rowSpan = 0
            }
            item.rowIndex = index
            return item
        })
    }
    const actionFormRef = ref(null)
    function handlerAddAction() {
        actionState.title = '新建行动项任务'
        actionState.actionList.push({ ...actionState.actionListItem })
        actionState.addOrEditActionVisible = true
    }
    function handlerDeleteActionItem(index) {
        actionState.actionList.splice(index, 1)
    }
    function handlerAddActionItem(index) {
        actionState.actionList.push({ ...actionState.actionListItem })
    }
    function handlerActionOk(){}
    function handleSubmitactionSop(){
      const params = {
        form: [],
        sopList:actionState.sopList,
        taskId:actionState.current.value.taskId
      }
      params.form = [...actionState.CompletionCheckListCheckList.value]
      post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/save_standard_sop',params).then(()=>{
        message.success('操作成功')
        actionState.templateOkVisible = false
        getAction()
      })
    }
    // 新-新模板项目检查清单确认事件
    function handlerTemplateOk() {
      if (!checkAllSelected(CompletionCheckListCheckList.value)) {
        message.info('请确认完成标准及SOP全部已实现');
      }
      else if (actionState.fileList.length < 1) {
        message.info('请上传附件');
      }

      else if(!checkAllSelected(sopList.value[0].contentList)){
        message.info('请确认完成标准及SOP全部已实现');
      }else{
        handlerCheckOk();
      }
    }

    const actionOkDisabled = ref(false)
    function handlerCheckOk() {
      actionOkDisabled.value = true
      const params = {
        form: [],
        sopList:actionState.sopList,
        taskId:actionState.currenttaskId
      }
      params.form = [...actionState.CompletionCheckListCheckList, ...actionState.ppmTemplateCheckList]
      apiMap = {
        default: "/solution-ppm/api/v2/built-in-system-ppm/task/attachmentUploading",
        plat: "/solution-ppm/api/v2/built-in-system-ppm/v2/platform/task/attachment",
        market: "/solution-ppm/api/v2/built-in-system-ppm/internalAndMarketTask/attachmentUploading",
        deliver: "/solution-ppm/api/v2/built-in-system-ppm/delivery_task/attachmentUploading"
      };
      post(apiMap[pageType], {
        ppmEnclosureInfoList: actionState.fileList,
        taskId: actionState.current.taskId
      }).then(data=>{
        if(data.code===200){
          post(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/${current.value.taskId}/standard_info/submit`, params).then(data=>{
            if(data.code===200){
              actionOkDisabled.value  = false;
              actionState.templateOkVisible = false;
              message.success("操作成功");
              getTableData();
            }else{
              message.error('提交失败')
              actionOkDisabled.value = false
            }
          })
        }else{
          actionOkDisabled.value = false
          message.error('附件上传失败')
        }
      })

    }
    function actionBeforeOk(record){
      actionState.taskId=record.taskId
    }
    function handleActionStart(record){
      actionState.taskId=record.taskId
    }
    function handlerDeleteAction(record){
      actionState.taskId=record.taskId
    }
    function handlerShowActionNotes(record){
      actionState.taskId=record.taskId
    }
    function handlerEditAction(record){
      actionState.title = '编辑动项任务'
      actionState.taskId=record.taskId
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .data-analysis {
        padding: 20px 0;
    }

    .data-analysis > *:not(:last-child) {
        margin-bottom: 20px;
    }

    .data-analysis .header {
        display: flex;
        justify-content: space-between;
    }

    .data-analysis .header .title {
        font-weight: 500;
        font-size: 16px;
        border-left: 8px solid #3875ff;
        height: 35px;
        line-height: 35px;
        text-indent: 8px;
    }

    .first-chart-title {
        font-weight: 500;
        font-size: 17px;
        display: flex;
        width: 70%;
        margin: 0 auto 10px;
    }

    .first-chart-title > * {
        white-space: no-wrap;
        flex: 1;
    }

    .chart {
        height: 200px;
    }

    .chart-title {
        display: flex;
        justify-content: space-between;
    }

    .other-row .chart-title {
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }

    .other-row .chart {
        height: 260px;
    }

    .mr10 {
        margin-right: 20px;
    }

    .ml10 {
        margin-left: 20px;
    }

    .progress {
        padding: 0 20px 20px 20px;
        border: 2px solid #fff;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(6px);
        margin-bottom: 24px;
        margin-top: 10px;
        color: rgb(89, 89, 89);
    }

    .progress .timeaxis {
        width: 100%;
        margin-top: 65px;
        display: flex;
        flex-flow: wrap;
        color: rgb(89, 89, 89);
    }

    .progress .no-progress {
        height: 370px;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        border: 1px solid #fff;
        border-radius: 10px;
        position: relative;
        /* 水平居中 */
    }

    .progress .no-progress .tip {
        width: 200px;
        height: 101px;
        position: absolute;
        background-image: url('http://10.40.0.33:9001/file-storage/404789380744112128.png');
        background-size: cover;
        top: 30%;
        color: rgb(89, 89, 89);
    }

    .progress .no-progress .tip .message {
        position: absolute;
        left: 22%;
        bottom: -40px;
        font-size: 16px;
        color: rgb(89, 89, 89);
    }

    .progress .box:nth-child(-n + 5) {
        width: 20%;
        margin: 0;
        color: rgb(89, 89, 89);
    }

    .body .right-box .progress .box:nth-child(n + 11) {
        width: 20%;
        margin-top: 63px;
    }

    .progress .box {
        width: 20%;
        margin-top: 55px;
        color: rgb(89, 89, 89);
    }

    .progress .box .item {
        border-bottom: 3px solid #3f79ff;
        position: relative;
        color: rgb(89, 89, 89);
    }

    .progress .box .item .cercle {
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        background-color: #3f79ff;
        top: -11px;
        left: 0;
        color: rgb(89, 89, 89);
    }

    .progress .box .item .arrow {
        position: absolute;
        font-size: 35px;
        color: #3f79ff;
        top: -16px;
        right: -15px;
    }

    .progress .box .item .center {
        width: 100%;
        font-size: 16px;
        text-align: center;
        position: absolute;
        font-weight: 600;
        top: -55px;
        color: rgb(89, 89, 89);
    }

    .progress .circular {
        width: 50px;
        height: 50px;
        background: white;
        margin: auto;
        margin-bottom: -4px;
        position: relative;
        top: -13px;
        color: rgb(89, 89, 89);
    }

    .progress .detailed-information {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        color: rgb(89, 89, 89);
    }

    .progress .detailed-information .message {
        flex: 1;
        width: 20%;
        background: linear-gradient(to bottom, #f3f7fa, #ffffff);
        border-radius: 8px;
        height: 114px;
        margin: 0 8px;
        padding: 10px;
        box-shadow: 0 4px 4px #eff0f1;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-bottom: 10px;
        color: rgb(89, 89, 89);
    }

    .progress .detailed-information .message p {
        flex: 1;
        color: rgb(89, 89, 89);
    }

    .progress .detailed-information .message .plan {
        font-size: 14px;
        margin: 0;
        font-weight: normal;
        color: rgb(89, 89, 89);
        display: flex;
        align-items: center;
    }

    .progress .detailed-information .message .plan-count {
        position: absolute;
        border-radius: 2px 8px 2px 8px;
        top: 0;
        right: -8px;
    }

    .progress .detailed-information .message .tag-day {
        border-radius: 10px;
        margin: 0;
        position: absolute;
        right: 0;
        bottom: 15%;
    }

    /deep/ .ant3-tag {
        border: none;
        background-color: rgba(255, 42, 0, 0.1);
        color: #ff2a00;
    }

    /deep/ .ant-tag {
        border: none;
        background-color: rgba(255, 42, 0, 0.1);
        color: #ff2a00;
    }

    .tip-tool p {
        margin-bottom: 12px;
    }

    /* 里程碑进度新增css。 */
    .warning {
        color: red;
        text-decoration: underline;
        cursor: pointer;
    }

    .remind {
        color: red;
    }

    .xmjd-num {
        font-size: 14px;
        font-weight: 600;
        font-family: PingFangSC-Semibold;
    }

    .xmjd-title {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        opacity: 0.8;
    }

    .click-num {
        color: #3875ff;
        text-decoration: underline;
        cursor: pointer;
    }

    /deep/ .ant3-table-tbody td,
    /deep/ .check-task-table .ant3-table-tbody td {
        padding: 8px 16px;
    }

    .ant3-table-thead > tr > th,
    /deep/ .ant3-table-thead > tr > th,
    /deep/ .aps-table-thead > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-bottom: 1px solid #3875ff;
    }

    /* 里程碑进度css。 */

    .event-page {
        background-color: #fff;
    }

    .event-page .table-form-box {
        padding: 4px 0 4px;
        margin-bottom: 4px;
        margin-top: -3px;
    }

    .event-page .event-table {
        margin-top: 10px;
    }

    /deep/ .event-page .ant3-table-thead tr th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 14px 16px;
    }

    /deep/ .event-page tr:nth-child(odd),
    /deep/ .event-page tr:nth-child(odd) td {
        background: #f8fafc;
    }

    .praise-col {
        padding: 0 20px 0 20px;
        position: relative;
        font-size: 16px;
        font-weight: 600;
    }

    .praise-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 20px;
        margin-top: -15px;
    }

    /deep/ .cell-wrapper {
        padding: 0 16px !important;
    }

    .content-box {
        display: flex;
        flex-direction: row;
    }

    .content-box .right-table {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .right-table .search {
        background: #fff;
    }

    .right-table.table-box {
        flex: 1;
        background: #fff;
        padding: 10px;
    }

    .mt15 {
        margin-top: 15px !important;
    }

    .mr16 {
        margin-right: 20px;
    }

    /deep/ .my-page .aps-picker,
    /deep/ .ant3-picker {
        width: 100%;
    }

    /deep/ .my-page .aps-form-item-label,
    /deep/ .my-page .ant3-form-item-label {
        width: 115px;
    }

    /deep/ .my-page .ant3-row .ant3-col:nth-child(2) .ant3-form-item-label,
    /deep/ .my-page .aps-row .aps-col:nth-child(2) .aps-form-item-label {
        width: 154px;
    }

    /deep/ .my-page .ant3-row .ant3-form-item-control,
    /deep/ .my-page .aps-row .aps-form-item-control {
        max-width: 260px;
    }

    /deep/ .one-line .ant3-form-item-control,
    /deep/ .one-line .aps-form-item-control {
        max-width: unset !important;
    }

    .del {
        width: 66px;
        color: #3875ff;
        float: right;
    }

    .form-content {
        display: inline-block;
        width: calc(100% - 80px);
    }

    .edit-form-content {
        width: 100%;
    }

    .form-item {
        border-bottom: 1px solid #e5e7eb;

        &:not(:first-child) {
            margin: 20px 0 0;
        }
    }

    .add-btn {
        margin-top: 20px;
    }

    .fr {
        float: right !important;
    }

    /deep/ .ant3-spin-nested-loading,
    /deep/ .ant3-spin-container {
        width: 100%;
        overflow: hidden;
    }

    .checkbox-group {
        margin: 10px 0;
        white-space: normal;
    }

    .checkbox-group .label {
        font-size: 16px;
        line-height: 1.4em;
        color: #3875ff;
        border-left: 6px solid #3875ff;
        text-indent: 8px;
        margin: 8px 0;
    }

    .new-check .label {
        font-size: 16px;
        line-height: 1.4em;
        color: #3875ff;
        border-left: 6px solid #3875ff;
        text-indent: 8px;
        margin: 8px 0;
    }

    .checkbox-group label {
        width: 100%;
        padding-left: 10px;
    }

    .checkbox-group /deep/ .aps-checkbox-wrapper + .aps-checkbox-wrapper,
    .checkbox-group /deep/ .ant3-checkbox-wrapper + .ant3-checkbox-wrapper {
        margin-left: 0;
    }

    .ant3-table-thead > tr > th,
    /deep/ .ant3-table-thead > tr > th,
    /deep/ .aps-table-thead > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 14px 16px;
        border-bottom: 1px solid #3875ff;
    }

    /deep/ .ant3-table.ant3-table-bordered > .ant3-table-container > .ant3-table-body > table > tbody > tr > td {
        border: 1px solid #d9d9d9;
        color: #262626;
        border-left: none;
    }

    /deep/ .table-striped td {
        background-color: #fafafa;
    }

    .table-form-box {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .table-form-box > span {
        padding-left: 8px;
        line-height: 21px;
        font-weight: 600;
        font-size: 16px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    .content-box .right-table .search {
        background: #fff;
        margin-bottom: 6px;
    }

    /deep/ .aps-table-thead > tr,
    /deep/ .ant3-table-thead > tr {
        line-height: 12px;
    }

    /deep/ .event-page .ant3-table-tbody td,
    /deep/ .my-page .aps-table-tbody td,
    /deep/ .my-page .ant3-table-tbody td {
        padding: 0 16px;
    }

    /deep/ .ant3-table-tbody tr {
        line-height: 22px;
        height: 40px;
    }

    :deep(.@{ant-prefix}-table-empty .@{ant-prefix}-table-tbody tr > td) {
        padding: 0;
    }

    .hide {
        display: none;
    }

    .segmentation {
        width: 100%;
        height: 10px;
    }

    .task-fill-btn {
        background: #3875ff;
        border-color: #3875ff;
    }

    .task-no-btn {
        color: #3875ff;
        border-color: #3875ff;
    }

    .ant3-btn-link {
        color: #3875ff;
    }

    .wqd-btn,
    .yq-btn,
    .wc-btn,
    .yqwc-btn,
    .jxz-btn,
    .spz-btn {
        background: #ffffff;
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 66px;
        height: 22px;
        line-height: 22px;
        margin: 0 auto;
    }

    .wc-btn {
        border: 1px solid rgba(48, 191, 120, 1);
        color: #30bf78;
    }

    .yq-btn {
        border: 1px solid rgba(224, 32, 32, 1);
        color: #e02020;
    }

    .wqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c;
    }

    .jxz-btn {
        border: 1px solid rgba(56, 117, 255, 1);
        color: #3875ff;
    }

    .yqwc-btn {
        border: 1px solid rgba(255, 152, 70, 1);
        color: #ff9846;
    }

    .spz-btn {
        border: 1px solid #00b4ec;
        color: #00b4ec;
    }

    .xmyq-btn,
    .xmwc-btn {
        background: rgba(24, 194, 255, 0.1);
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 36px;
        height: 18px;
        line-height: 15px;
        margin: 0 auto;
        display: inline-block;
    }

    .xmwqd-btn,
    .xmjxz-btn {
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 46px;
        height: 18px;
        line-height: 15px;
        margin: 0 auto;
        display: inline-block;
    }

    .xmjxz-btn {
        border: 1px solid rgba(24, 194, 255, 1);
        color: #18c2ff !important;
        background: rgba(24, 194, 255, 0.1);
    }

    .xmwc-btn {
        border: 1px solid rgba(82, 196, 26, 1);
        color: #52c41a !important;
        background: #edf9e8;
    }

    .xmyq-btn {
        border: 1px solid rgba(245, 34, 45, 0.5);
        color: #f5222d !important;
        background: rgba(245, 34, 45, 0.1);
    }

    .xmwqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c !important;
    }

    .export-btn {
        width: 32px;
        height: 32px;
        display: inline-block;
        border: 1px solid #3875ff;
        position: absolute;
        top: 0;
    }

    .btn-img {
        height: 16px;
        width: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/421949328274890752.png');
        background-size: cover;
        margin: 8px 8px;
    }

    .count-down-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 5px;
    }

    .count-down-content > div {
        box-sizing: border-box;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }

    .task-name {
        position: relative;
        height: 40px;
        line-height: 40px;
    }

    .task-milestone {
        position: absolute;
        top: 13px;
        left: 9px;
        width: 45px;
        height: 14px;
        font-size: 12px;
        line-height: 14px; /* 与高度相同 */
        color: #3875ff;
        background: #ebf1ff;
        text-align: center;
    }

    .task-first {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }

    .task-over {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }

    .is-first {
        margin-left: 55px;
    }

    .is-first-no {
        margin-left: 16px;
    }

    .task-name-title {
        display: inlie-block;
        min-width: 50px;
    }

    .finish-standard {
        display: inlie-block;
        min-width: 70px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .no-first {
        margin-left: 20px;
    }

    /* 倒计时 */
    .count-down {
        border-radius: 1px;
        background: rgba(255, 123, 0, 0.1);
        color: #ff7b00;
        height: 14px;
        min-width: 52%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 全组 */
    .weight-num {
        font-weight: 600;
    }

    .all-group-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        width: 52%;
        line-height: 14px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 项目经理 */
    .pm-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
        margin-bottom: 3px;
    }

    /* 负责人 */
    .ower-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .all-group-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        width: 44%;
        line-height: 14px;
        margin-bottom: 3px;
        margin-right: 3px;
    }

    /* 项目经理 */
    .pm-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
    }

    /* 负责人 */
    .ower-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .count-down-hover {
        color: #262626;
    }

    .count-down-hover > p {
        margin: 0;
    }

    .attachment-template {
        display: block;
        overflow-y: auto; /* 隐藏垂直滚动条 */
        scrollbar-width: thin; /* Firefox 64+ */
        scrollbar-color: transparent transparent; /* Firefox 64+ */
        height: 40px;
        line-height: 40px;
    }

    .attachment-template::-webkit-scrollbar {
        height: 0px; /* 谷歌、Safari、Edge等浏览器 */
    }

    .attachment-template::-webkit-scrollbar-thumb {
        background-color: transparent; /* 设置滚动条的颜色为透明 */
    }

    .extension-color {
        border-radius: 1px;
        background: rgba(89, 89, 89, 0.1);
        color: #595959;
        height: 14px;
        min-width: 51%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    .exam-wrapper .tips {
        margin: 16px 24px 10px;
        background: rgba(250, 173, 20, 0.1);
        height: 36px;
        line-height: 36px;
        padding-left: 16px;
        font-size: 14px;
        color: #282828;
        width: 672px;
    }

    .exam-wrapper .tips.exam {
        height: 56px;
        line-height: 20px;
    }

    .exam-wrapper .icon {
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
    }

    .exam-wrapper :deep(.@{ant-prefix}-spin-container) {
        padding-top: 5px;
    }

    .exam-wrapper .content-wrapper {
        margin: 0 24px 16px;
        height: 602px;
        width: 672px;
        overflow: auto;
        user-select: none;
    }

    .exam-wrapper .section {
        width: 660px;
        margin: 0 auto 16px;
        min-height: 437px;
        padding: 16px;
        font-size: 14px;
        background: #ffffff;
        box-shadow: 0 0 6px #e4e4e4;
        border-radius: 2px;
    }

    .exam-wrapper .content-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    .exam-wrapper .section::-webkit-scrollbar {
        width: 2px;
    }

    .exam-wrapper .h1-title {
        margin-bottom: 10px;
        font-size: 16px;
        color: #f5222d;
        font-weight: 600;
    }

    .exam-wrapper .h2-title {
        font-size: 14px;
        color: #262626;
        margin-bottom: 4px;
    }

    .exam-wrapper .h2-title b {
        display: inline-block;
        width: 86px;
        text-align: right;
    }

    .exam-wrapper .article {
        color: #262626;
        margin-bottom: 5px;
        line-height: 20px;
        padding-left: 10px;
    }

    .exam-wrapper .table {
        border: 1px solid rgba(56, 117, 255, 1);
        border-radius: 4px;
        font-size: 14px;
        color: #595959;
        margin-top: 16px;
        display: flex !important;
    }

    .exam-wrapper .table .sub-title {
        border-bottom: 1px solid rgba(56, 117, 255, 0.5);
        height: 32px;
        text-align: center;
        color: #3875ff;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exam-wrapper .table .title {
        border-bottom: 1px solid rgba(56, 117, 255, 0.5);
        border-right: 1px solid rgba(56, 117, 255, 0.5);
        min-height: 32px;
        text-align: right;
        padding-right: 8px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .exam-wrapper .table .content {
        border-bottom: 1px solid rgba(56, 117, 255, 0.5);
        min-height: 32px;
        text-align: left;
        padding: 4px 0px 2px 8px;
    }

    .exam-wrapper .table .content .option {
        display: inline-block;
        min-width: 100px;
    }

    .exam-wrapper .table .no-border {
        border-bottom: none;
    }

    .exam-wrapper .question {
        outline: none !important;
        display: inline;
    }

    .footer {
        margin: 16px 24px;
        position: relative;
        text-align: center;
    }

    .footer .failed-text {
        position: absolute;
        left: 0;
        font-size: 14px;
        color: #595959;
    }

    .daily-risk-wrapper .submit {
        height: 40px;
        background-image: linear-gradient(270deg, #f1f3f6 100%, #f0f2f5 0%);
        background-image: url('http://10.40.0.33:9001/file-storage/421976148877647872.png');
        background-size: contain;
        padding-left: 12px;
        font-size: 14px;
        color: #595959;
        margin-right: 16px;
        margin-bottom: 16px;
    }

    .daily-risk-wrapper .submit b {
        font-size: 14px;
        color: #262626;
    }

    .daily-risk-wrapper .detail {
        background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.1) 100%);
        border-radius: 2px;
        border-left: 4px solid #3875ff;
        padding: 8px 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/421450255266619392.png');
        background-size: contain;
    }

    .daily-risk-wrapper .detail .item {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .daily-risk-wrapper .detail .title {
        font-size: 14px;
        color: #262626;
        font-weight: 600;
        position: relative;
    }

    .daily-risk-wrapper .detail .title:before {
        position: absolute;
        left: 0;
        bottom: 4px;
        content: '';
        width: 100px;
        height: 7px;
        background-image: linear-gradient(90deg, rgba(56, 117, 255, 0.4) 0%, rgba(56, 117, 255, 0) 100%);
    }

    .daily-risk-wrapper .detail .content {
        font-size: 14px;
        color: #595959;
        text-align: left;
        font-weight: 400;
        height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    :deep(.@{ant-prefix}ant3-carousel .slick-list) {
        height: 300px;
    }

    :deep(.ant3-carousel .slick-dots li) {
        width: 8px;
        height: 8px;
        border-radius: 4px;
    }

    :deep(.@{ant-prefix}-carousel .slick-dots li.slick-active) {
        width: 16px;
    }

    :deep(.@{ant-prefix}-carousel .slick-slider) {
        width: 393px;
        height: 300px;
    }

    :deep(.@{ant-prefix}-carousel .slick-dots-bottom) {
        bottom: -22px !important;
        display: none !important;
    }

    .@{ant-prefix}-carousel :deep(.slick-arrow.custom-slick-arrow) {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        font-size: 16px;
        color: #3c78ff;
        background-color: #ebf1ff;
        opacity: 0.5;
        z-index: 1;
    }

    .@{ant-prefix}-carousel :deep(.custom-slick-arrow:before) {
        display: none;
    }

    .@{ant-prefix}-carousel :deep(.custom-slick-arrow:hover) {
        opacity: 1;
    }

    .vid_5sbw9g7hey {
        width: 100%;
        height: 380px;
        display: block;
        padding-top: 16px;
        padding-right: 24px;
        padding-bottom: 16px;
        padding-left: 24px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px #e5e5e5;
    }

    .vid_06yu6lwuf7 {
        width: 100%;
        margin-bottom: 12px;
        border-style: none;
        border-color: #ffffff;
    }

    .vid_toxfkue4zy {
        display: flex;
        flex-direction: row;
        flex-wrap: undefined;
    }

    .vid_jl5ou7qz6s {
        display: flex;
        flex-direction: row;
        flex-wrap: undefined;
        padding-left: 8px;
        font-weight: 600;
        color: rgba(38, 38, 38, 1);
        font-size: 16px;
        line-height: 16px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    .vid_2apjl6k1x3 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: undefined;
        box-shadow: 0px 0px 0px 0px;
    }

    .vid_8o4c0ozqf4 {
        width: 100%;
        background-color: #ffffff;
    }

    .vid_up9eo3kmq0 {
        color: rgba(89, 89, 89, 1);
        font-size: 14px;
    }

    .vid_9xyyp3ju67 {
        font-weight: 500;
        color: rgba(38, 38, 38, 1);
        font-size: 14px;
    }

    .vid_nc3051idjd {
        font-weight: 500;
        color: rgba(38, 38, 38, 1);
        font-size: 14px;
    }

    .vid_33b1bl5zna {
        overflow: hidden;
    }

    .task-important {
        padding-left: 8px;
        font-weight: 600;
        font-size: 16px;
        box-shadow: 0px 0px 0px 0px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    .table-box {
        flex: 1;
        background: #fff;
        padding: 10px;
    }

    /deep/ .ant3-table-tbody td,
    /deep/ .record-table-box .ant3-table-tbody td {
        padding: 0 16px;
    }

    /deep/ .record-table-box .ant3-table-pagination.ant3-pagination {
        margin-bottom: 0;
    }

    .communication-record {
        margin-top: 20px;
    }

    .download-text {
        color: #3875ff;
        cursor: pointer;
        text-decoration: underline;
    }

    .xmyqwc-btn {
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 58px;
        height: 18px;
        line-height: 15px;
        margin: 0 auto;
        display: inline-block;
        border: 1px solid #ff9846;
        color: #ff9846 !important;
        background: rgba(250, 240, 231, 0.1);
    }

    /*
              SOP
              */
    .task-dependency {
        white-space: pre-wrap;
    }

    .sop-btn {
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
    }

    .no-sop {
        background-image: url('http://10.40.0.33:9001/file-storage/431370789385246720.png');
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150px;
        height: 75px;
        transform: translate(-50%, -50%);
    }

    .no-sop-tip {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
    }

    .one-line-sop {
        display: flex;
        min-height: 40px;
        line-height: 40px;
        border: 1px solid #afc8ff;
    }

    .one-left {
        background-color: #ebf1ff;
        width: 150px;
        padding: 0 7px;
        text-align: right;
    }

    .one-right {
        padding: 0 7px;
        flex: 1;
        border-left: 1px solid #afc8ff;
    }

    .one-line-sop,
    .two-line-sop {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }

    .two-line-sop {
        border: 1px solid #afc8ff;
        display: flex;
        height: 40px;
        line-height: 40px;
    }

    .two-item {
        display: flex;
        width: 50%;
    }

    .two-left {
        padding: 0 7px;
        text-align: right;
        width: 150px;
        background-color: #ebf1ff;
    }

    .two-right {
        border-left: 1px solid #afc8ff;
        border-right: 1px solid #afc8ff;
        flex: 1;
        padding: 0 7px;
    }

    .text-bold {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .sop-div {
        min-height: 300px;
        max-height: 650px;
        overflow: auto;
        margin-bottom: 40px;
    }

    /*
              SOP
              */

    /*
          倒计时新
          */

    .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f8fafc;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #595959;
        padding: 8px 16px;
        border: none;
    }

    .score-title {
        margin: 2px 2px 12px 2px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }

    /*关键路径*/
    .critical-path {
        position: absolute;
        top: 13px;
        left: 5px;
        font-size: 12px;
        width: 60px;
        height: 14px;
        line-height: 14px; /* 与高度相同 */
        color: #ff9846;
        background: #fff5ed;
        text-align: center;
    }

    .task-milestone-right {
        left: 70px;
    }

    .is-first-path {
        margin-left: 115px;
    }

    .task-first-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }

    .task-over-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }

    .is-first-path-no-mark {
        margin-left: 70px;
    }

    /*
行动项样式
*/
    /deep/ .form-content-action .ant3-form-item-label {
        width: 115px;
    }
    .form-content-action {
        display: inline-block;
        width: calc(100% - 80px);
    }
</style>
